<?xml version="1.0" encoding="utf-8" ?>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<jsp:include page="/commonPart/htmlHeader2.jsp">
	<jsp:param name="title" value="站内留言-${userInfo.name}的个人空间-CommonWorld" />
</jsp:include>
<body>
<div id = "CW_Screen" >
	<jsp:include page= "/commonPart/bodyHeader2.jsp" ></jsp:include>
	<div id = "CW_Content">
		<div id = "SpaceLeft">
			<div class = "AdminNav clearfix">
				<a href = "${userUrls.home}" class = "u" title = "返回我的空间首页">
					<img src = "${userInfo.headImage}" alt = "${userInfo.name}" class = "SmallPortrait" user = "${userInfo.id}" />	
				</a>
				<span class = "h">空间管理</span>
			</div>
			<div id = "AdminMenus" class = "Mod">
				<ul>
					<li class = "caption">
						<strong>个人信息管理</strong>
						<ol>
							<li class = "active"><a href = "${userUrls.adminInbox}">站内留言</a></li>
							<li><a href = "${userUrls.adminProfile}">修改个人资料</a></li>
							<li><a href = "${userUrls.adminChqwd}">更改登录密码</a></li>
							<li><a href = "${userUrls.adminPortrait}">更改头像图片</a></li>
						</ol>
					</li>
				</ul>
				<ul>
					<li class = "caption">
						<strong>博客管理</strong>
						<ol>
							<li><a href = "${userUrls.adminNewBlog}">发表博客</a></li>
							<li><a href = "${userUrls.adminDrafts}">草稿箱(${draftInfos.count})</a></li>
							<li><a href = "${userUrls.adminBlogCatalogs}">博客设置/分类管理</a></li>
						</ol>
					</li>
				</ul>
			</div>		
		</div>
		<div class = "SpaceList" id = "AdminBody">
			<div class = "TopBar">
				<div class = "NavPath">
				</div>
			</div>
			<div class = "AdminHead">
				<ul class = "Tabs">
					<li><a class = "${box == 'all' ? 'active' : ''}" href = "?box=all">所有留言</a></li>
					<li><a class = "${box == 'user' ? 'active' : ''}" href = "?box=user">用户留言</a></li>
					<li><a class = "${box == 'sys' ? 'active' : ''}" href = "?box=sys">系统留言</a></li>
				</ul>
			</div>
			<div class = "AdminContent">
				<div class = "AdminHead">
					<div class = "RelativeLinks" style = "margin: 0px;">
						<a class = "rndbutton" href = "javascript:cleanmsg()"><span>清空所有留言</span></a>
						<a class = "rndbutton" href = "javascript:sendmsg(${userInfo.id}, 0, '')"><span>发送留言</span></a>
					</div>
					<style>
					#AjaxBox {text-align: left; padding: 10px; background: #fff;}
					#AjaxBox #Title {
						padding: 5px 0 5px 10px;
						background: #40aa53;
						color: #fff;
						font-size: 10pt;
						font-weight: bold;
						margin-bottom: 10px;
					}
					#AjaxBox #Title a {color: #ff0; margin: 0 3px;}
					
					#AjaxBox form {}
					#AjaxBox form .SUBMIT {font-weight: bold;}
					#AjaxBox form input {padding: 1px 2px;}
					#AjaxBox form textarea {background: #ffd; border: 1px solid #ccc; padding: 2px;}
					#AjaxBox form tr.submit td {padding-top: 20px;}
					
					#AjaxBox form table {}
					#AjaxBox form table tr th {text-align: right;}
					#AjaxBox form table tr td {padding: 0 0 5px 0;}
					#AjaxBox form table tr td.heading {font-weight: bold; padding: 0;}
					#AjaxBox form table tr td input {padding: 2px;}
					#AjaxBox form table tr td textarea {font-size: 10pt; padding: 2px;}
					#AjaxBox form table tr.submit td input {font-size: 10pt; padding: 2px 5px;}
					
					#AjaxBox form from h2 {font-size: 12pt; border-bottom: 1px solid #ccc; margin:0; padding: 10px 0 10px 20px;}
					#AjaxBox form from h2 a {margin: 0 5px;}
					</style>
					<div id = "AjaxBox" style = "display: none;">
						<h2 id = "Title">发送留言给 <u>receiverName</u></h2>
						<div id = "Content">
							<div id = "s_error_msg" class = "error_msg" style = "display: none;"></div>
							<div id = "s_success_msg" class = "ok_msg" style = "display: none;"></div>
							<form id = "frm_sendmsg" action = "/action/msg/inboxSend" method = "post">
								<input id = "sender_id" type = "hidden" name = "senderId" value = "" />
								<input id = "receiver_id" type = "hidden" name = "receiverId" value = "" />
								<table>
									<tr id = "receiver_name" style = "display:none;"><td><input type = "text" name = "receiverName" placeholer = '请输入对方的昵称' /></td></tr>
									<tr><td class = "heading">留言内容:</td></tr>
									<tr>
										<td>
											<textarea id = "ta_msg_content" name = "content" placeholder = "最多250个字" 
											class = "form-contorl" style = "width:400px;height:120px;padding:2px; overflow: auto; background:#fff;"></textarea>
										</td>
									</tr>
									<tr class = "submit">
										<td>
											<input type = "button" value = "发送" class = "btn btn-primary" style = "width:82px; height: 34px;" id = "btn_sm_send" onclick = "PostMsg()"></input>
										</td>
									</tr>
								</table>
							</form>
						</div>
					</div>					
					<script>
						function cleanmsg()	 {
							if (confirm('确定删除全部留言？')) {
								ajax_post('/action/msg/deleteAllMsgs', '', function(result) {
									if (result.length > 0) {
										alert(result);
									} else {
										location.reload();
									}
								});
							}
						}
						
						function sendmsg(sender, receiver, name) {
							$('#sender_id').val(sender);
							$('#receiver_id').val(receiver);	
							$('#receiver_name').find('input').val('');
							if (receiver == 0) {
								$('#AjaxBox').find('h2').html('发送留言');
								$('#receiver_name').show();
							} else {
								$('#receiver_name').hide();
								$('#AjaxBox').find('h2').html('发送留言给 <u>' + name + '</u>');
							}
							
							$.fancybox({
								padding: 0,
								type: 'inline',
								href: '#AjaxBox',
								afterClose: function() {
									document.getElementById('s_error_msg').setAttribute('style', 'display:none');
									document.getElementById('s_success_msg').setAttribute('style', 'display:none');
									$('#ta_msg_content').val('');
									return true;
								},
								helpers: {
									overlay: {
										closeClick: false,
										css: {'background':'rgba(83,83,83,0.6)'},
									},
								},
							});
						}
						
						function PostMsg() {
							var receiver = $('#receiver_name');
							$('#s_success_msg').hide();
							$('#s_error_msg').hide();
							if (receiver.css('display') != 'none' && receiver.find('input').val().length == 0) {
								$('#s_error_msg').html('接收人不能为空');
								$('#s_error_msg').show();
							}
							
							if ($('#ta_msg_content').val().length == 0) {
								$('#s_error_msg').html('留言不能为空');
								$('#s_error_msg').show();
								return false;
							}
							if ($('#ta_msg_content').val().length > 250) {
								$('#s_error_msg').html('留言字数超过了250个');
								$('#s_error_msg').show();
								return false;
							}
							if ('${visitorStatus.login}' == 'false') {
								$('#s_error_msg').html("请先<a href = '${initParam.webRootUrl}account/login.jsp'>登录</a>");
								$('#s_error_msg').show();
								return false;
							}
							$('#frm_sendmsg').ajaxSubmit({
								success: function(result) {
									if (!result) {
										$('#ta_msg_content').val('');
										$('#s_success_msg').html('留言成功');
										$('#s_success_msg').show();
									} else {
										$('#s_error_msg').html(result);
										$('#s_error_msg').show();
									}
								}
							});
						}
						
					</script>
					<h1 style="visibility: hidden;">
						<span class = "SubTitle">
							<form style = "margin: 20px 0 0 10px; display: inline;">
								<input type = "hidden" name = "box" vlaue = "${box}" />
								<input type = 'text' name = 'q' placeholder = "搜索留言" value = "${q}" />
								<input type = 'submit' value = "搜索 " style = "padding: 2px 5px;">
							</form>
						</span>
					</h1>
				</div>
				<ul class = "Msgs">
					<c:forEach items= "${msgs}" var= "msg">
						<li id = "Msg_${msg.msgId}">
							<table class = "ostable">
								<tr>
									<td class = "user">
										<a href = "${initParam.webRootUrl}u/${msg.otherId}" target = "_blank">
											<img title = "${msg.otherName}" align = "absmiddle" class = "SmallPortrait" alt = "${msg.otherName}" src = "${msg.otherHeadImage}" user = "${msg.otherId}" />
										</a>
									</td>
									<td>
										<div class = "msg">
											<c:if test = "${msg.senderId == msg.userId}">
												发送给
											</c:if>
											<a href = "${initParam.webRootUrl}u/${msg.otherId}" target="_blank">@${msg.otherName}</a>
											: ${msg.content}
										</div>
										<div class = "bottom">
											<span class = "date">${msg.sendTimeInterval}</span>
											<span class = "opts">
												<a href = "javascript:sendmsg(${userInfo.id}, ${msg.otherId}, '${msg.otherName}')">回复</a> |
												<a href = "${userUrls.adminMsgs}?user=${msg.otherId}">共有${msg.totalMsgs}条留言</a> |
												<a href = "javascript:deleteAllMsgs(${msg.userId}, ${msg.otherId}, '${msg.otherName}')">删除</a>
											</span>
										</div>
										<script>
											function deleteAllMsgs(userId, otherId, otherName) {
												if (confirm('你确定要删除所有与"' + otherName + '"的留言')) {
													ajax_post("/action/msg/deleteAllMsgs", "userId="+userId+"&otherId="+otherId, function(result) {
														if (result.length > 0) {
															alert(result);
														} else {
															location.reload();
														}
													});
												}
											}
										</script>
									</td>
								</tr>
							</table>
						</li>
					</c:forEach>
				</ul>
				<ul class = "pager">
					<c:if test="${currentPage > 1}">
						<li class = "page prev">
							<a href = "?box=${box}&p=${currentPage - 1}">&lt;</a>
						</li>
					</c:if>
					<c:if test = "${beginIndex > 1 }">
						<li class = "page">
							<a href = "?box=${box}&p=1">1</a>
						</li>
					</c:if>
					<c:forEach items="${pages}" var = "page">
						<li class = "page ${currentPage == page ? 'current' : ''}">
							<a href = "?box=${box}&p=${page}">${page}</a>
						</li>
					</c:forEach>
					<c:if test = "${endIndex < totalPage}">
						<li class = "page">
							<a href = "?box=${box}&p=${totalPage}">${totalPage}</a>
						</li>
					</c:if>
					<c:if test = "${currentPage < totalPage}">
						<li class = "page next">
							<a href = "?box=${box}&p=${currentPage + 1}">&gt;</a>
						</li>
					</c:if>
				</ul>
			</div>
		</div>
	</div>
	<div class = "clear"></div>
	<div id = "footer"></div>
</div>
</body>
</html>